<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    
    <ui:composition template="/template.xhtml">
        <ui:define name="content">
            <f:view>
                <h:form>
                    <p:commandButton id="btnSend" value="Send FeedBack" icon="ui-icon-mail-closed" action="#{feedbackController.prepareSendFB}" ajax="false"/>
                    <p:messages />
                    <center>
                    <p:panel id="pnlCourse" header="View My FeedBack" style="text-align: center">
                        <p:dataTable paginator="true" rows="5" value="#{feedbackController.listFB}" var="item" id="tblCourse" style="text-align: left">
                        <p:column style="width:150px;">
                            <f:facet name="header">
                                <h:outputText value="Title"/>
                            </f:facet>
                            <h:outputText style="word-break:break-all;" value="#{item.title}"/>
                        </p:column>
                        <p:column style="width:275px;">
                            <f:facet name="header">
                                <h:outputText value="Content"/>
                            </f:facet>
                            <c:set var="shortDescription"
                                   value="${item.content.length() > 80 ? fn:substring(item.content,0,80):item.content}" />
                            <c:if test="${fn:indexOf(shortDescription,' ') > 0}">
                                <c:set var="whiteSpace" value="true"/>
                            </c:if>
                            <h:outputText value="#{shortDescription}..." rendered="#{whiteSpace}"/>
                            <h:outputText value="#{shortDescription}..." style="word-break:break-all;" rendered="#{!whiteSpace}"/>
                        </p:column>
                        <p:column style="width:150px;">
                            <f:facet name="header">
                                <h:outputText value="Send Date"/>
                            </f:facet>
                            <h:outputText style="word-break:break-all;" value="#{item.commentDate}">
                                <f:convertDateTime pattern="MM/dd/yyyy"/>
                            </h:outputText>
                        </p:column>
                        <p:column style="width:275px;">
                            <f:facet name="header">
                                <h:outputText value="Answer"/>
                            </f:facet>
                            <c:set var="shortDescription"
                                   value="${item.answer.length() > 80 ? fn:substring(item.answer,0,80):item.answer}" />
                            <c:if test="${fn:indexOf(shortDescription,' ') > 0}">
                                <c:set var="whiteSpace" value="true"/>
                            </c:if>
                            <h:outputText value="#{shortDescription}..." rendered="#{whiteSpace}"/>
                            <h:outputText value="#{shortDescription}..." style="word-break:break-all;" rendered="#{!whiteSpace}"/>
                        </p:column>

                        <p:column style="text-align: center;">
                            <f:facet name="header">
                                <h:outputText value="Action"/>
                            </f:facet>

                          
                            <p:commandButton image="ui-icon ui-icon-search" action="#{feedbackController.prepareViewFB(item)}" title="View Details" ajax="false"/>
                            <h:outputText value=" "/>
                        </p:column>
                    </p:dataTable>
                    </p:panel>
                    </center>
                </h:form>
            </f:view>
        </ui:define>
    </ui:composition>
</html>
